<!--
 * @Descripttion:
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Link: 1074699502@qq.com
 * @Contact: QQ:1074699502
 * @LastEditors: 梧桐
 * @LastEditTime: 2020-12-07 04:14:52
 专注于直播电商产品研发与定制
-->
<template>
<div class="headWrap" :style="{backgroundColor:isScrollTop?'#a40a09':''}">
  <div class="headerWrapTop ">
    <slot></slot>
    <image src="/static/images/logo.png" class="iconLeft" v-if="false"></image>
 
    <div :class="isScrollTop?'scrollTop':''" class="inputWrap" @click="getnav('/pagesC/homeSon/searchAll?search_id=1')">
     
      <u-icon name="search" color="#888" size="30"></u-icon>
      <p class="searchtips">请输入商品关键词</p>
    </div>
  </div>

  <div v-show="!isScrollTop" class="specialWrap" v-if="false">
    <u-icon class="headIcon" name="checkbox-mark" color="#ffc7c7" size="24" label="精选好货" label-color="#ffc7c7" label-size="28"></u-icon>
    <u-icon class="headIcon" name="checkbox-mark" color="#ffc7c7" size="24" label="天天低价" label-color="#ffc7c7" label-size="28"></u-icon>
    <u-icon class="headIcon" name="checkbox-mark" color="#ffc7c7" size="24" label="多商户入驻" label-color="#ffc7c7" label-size="28"></u-icon>
    <u-icon  class="headIcon" name="checkbox-mark" color="#ffc7c7" size="24" label="极速物流" label-color="#ffc7c7" label-size="28"></u-icon>
  </div>


</div>
</template>

<script>
export default {
    data(){
      return{
        getcountry:{}
      }
    },
    props: {
        isBgWhite: {
            type: Boolean,
            default: true
        },
        isScrollTop: {
            type: Boolean,
            default: false
        },
    },

  mounted() {
        this.getcountry = uni.getStorageSync('geography')
      uni.$on('changeCurrency',res=>{
        this.getcountry = res
      })
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/mixins.scss';

/*
@font-face{
  font-family: 'BarlowCondensed';
  src: url('/static/fonts/BarlowCondensed-Medium.otf');
}
*/
.headWrap {
    padding: var(--status-bar-height) 30upx 10upx 30upx;

    position: fixed;
    z-index: 99;
    width: 95%;
    left: 50%;
  /*  #ifdef  MP-WEIXIN  */
  padding: 0 30upx;
  width: 100%;
  padding-top: 80upx;
  /*  #endif  */
    .headerWrapTop{
        display:flex;
        justify-content:space-between;
        margin-bottom:5upx;
      padding: 10upx;
      font-weight: bold;
    }
    .specialWrap{
        @extend .headerWrapTop;
         padding:20upx;
         margin-right:15upx;
    }

    transform: translateX(-50%);
    transition: all .6s;
    .title{
      color: #fff;
      font-size: 38upx;
      font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

      .info{
        font-size: 24upx;
        font-weight: lighter!important;
        color: rgba(255,255,255,0.7);

      }
    }
    .iconLeft {
        width: 74upx;
        height: 74upx;
        border-radius: 100px;
        margin-right: 20upx;
        border: 2upx solid #fa3f3f;
        animation: flip 4s ease-in-out 0.3s infinite;
    }

    @keyframes flip {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(10upx);
        }

        100% {
            transform: translateY(0);
        }
    }

    .inputWrap {
        @include flexbox($jc:flex-start);
        background: #f5f5f5;
        border-radius: 100px;
        flex: 1;
        height: 68upx;
        text-align: left;
        padding-left: 30upx;
        position: relative;
      width:100%;
      box-sizing: border-box;
         transition:all 0.6s;
        .searchBtn {
            background-image: linear-gradient(to right, #ffa468, #fa3f3f);
            padding: 0 30upx;
            align-self: flex-end;
            border-radius: 200px;
            color: #fff;
            position: absolute;
            right: -2upx;
            height: 68upx;
            line-height: 68upx;
            font-weight: 600;
        }

        .icon-search1 {
            width: 32upx;
            height: 32upx;
            background-image: url('/static/images/icon-search.png');
            background-size: cover;
            overflow: hidden;
            display: inline-block
        }

        .searchtips {
            color: #999;
            margin-left: 14upx;
        }
    }
}
.headIcon{
 /deep/ .u-icon__icon{
    border: 2upx solid #ffc7c7;
   border-radius:100px ;
   padding: 2upx;
  }

}
.u-m-l-15{
  margin-left: 15upx;
}
.scrollTop{
  margin-top: -80upx;
  width:85%!important;
  transition:all 0.6s;
  /* #ifndef APP-PLUS */
  margin-top: -74upx;
  /* #endif   */
}
</style>
